<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="读取文件" onclick="read()">
<div id="result">
    <!--读取到的文件内容-->
</div>
<script>
    function getData(filename) {
        return new Promise((resolve, reject) => {
            let objXmlHttp = new XMLHttpRequest();
            objXmlHttp.open("GET", filename, true);
            objXmlHttp.onreadystatechange = () => {
                if (objXmlHttp.readyState === 4) {
                    if (objXmlHttp.status === 200) {
                        resolve(objXmlHttp.responseText + "<br/>");
                    }
                    else {
                        reject("读取文件失败！");
                    }
                }
            };
            objXmlHttp.send();
        });
    }
    async function get() {
        return await getData("promise对象测试文件1.txt") + await getData("promise对象测试文件2.txt") + await getData("promise对象测试文件3.txt");
    }
    // 通过循环处理异步：
    async function getLoop() {
        const files = ["promise对象测试文件1.txt", "promise对象测试文件2.txt", "promise对象测试文件3.txt"];
        let msg = "";
        for (var i = 0, length = files.length; i < length; i++) {
            msg = msg +await getData(files[i]);
        }
        return msg;
    }
    // 若不使用async和await，则：
    function getNotAsyncKey() {
        let msg = "";
        return getData("promise对象测试文件1.txt").then(value => {
            msg += value;
            return getData("promise对象测试文件2.txt");
        }).then(value => {
            msg += value;
            return getData("promise对象测试文件3.txt");
        }).then(value => {
            msg += value;
            return msg;
        });
    }
    function read() {
        get().then((msg) => {
            let result = document.getElementById("result");
            result.innerHTML += msg;
        });
    }
</script>
</body>
</html>